{% extends "personal_center/base.html" %}

{% block page_link %}
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }

        tr {
            height: 35px;
        }

        th {
            text-align: center;
        }

        #lecd_table tr:hover{
            background: #cfcfcf;
        }

        tbody td{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        td:first-child, th:first-child {
            position: sticky;
            left: 0; /* 首行永远固定在左侧 */
            z-index: 1;
        }

        thead tr th {
            position: sticky;
            top: 0; /* 列首永远固定在头部  */
            background-color: #E8E8E8;
        }

        th:first-child {
            z-index: 2;
        }

        .model_li {
            color: #3f414d;
            width: 25%;
            cursor: pointer;
            display: none;
        }

        .top_tag {
            border-bottom: #01AAED solid 2px;
            color: #01AAED;
        }

        .tab_top {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
        }
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        .search{
            width: 30%;
            display: flex;
            float: right;
            margin: 5.5px 0;
            margin-right: 0.5%;
            /*border: 1px solid red;*/
        }

        .search input{
            vertical-align:middle;
            float: left;//左浮动
            flex: 4;
            height: 29px;
            width: 77%;
            outline: none;
            border: 1px solid #0070c1;
            box-sizing: border-box;//盒子模型，怪异IE盒子模型，width=content+border*2+padding*2
            padding-left: 10px;
            border-bottom-left-radius: 5px;
            border-top-left-radius: 5px;
        }

        .search button{
            float: right;
            flex: 1;
            height: 29px;
            line-height: 29px;
            background-color: #0070c1;
            color: white;
            border-style: none;
            outline: none;
            border-bottom-right-radius: 5px;
            border-top-right-radius: 5px;
        }

        .search button i{
            font-style: normal;
        }

        .search button:hover{
            font-size: 16px;
        }
        .div_clase{
            display: inline-block;width: 300px;height: 30px;line-height: 30px;font-size: 14px;color: #0b0b0b;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div class="headline">
        <div id="my_application_tab" class="tab_top top_tag">
            留存归档
        </div>
    </div>

    <div id="my_application" style="width: 100%;height: 93%;overflow: auto;background-color: white;">
        <div class="right-box" style="width: 100%;height: 95%;margin-top: 0;">
            <div style="height: 93%;width: 100%;overflow: auto;border-bottom: #cccccc solid 1px;background-color: white;">
                <table id="lecd_table" style="border-collapse: collapse;border-color: #DCDCDC;" cellspacing="0" cellpadding="2" width="100%" border="1">
                    <thead>
                    <tr>
                        <th style="width: 300px;">来文标题</th>
                        <th>来文字号</th>
                        <th>收文编号</th>
                        <th>收文日期</th>
                        <th>创建人</th>
                        <th>创建科室</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody style="overflow: auto;" id="my_mine_body">
                    </tbody>
                </table>
                <div id="img-display" style="width: 75%;text-align: center;position: fixed;display: none;">
                    <div style="margin-top: 10%;">
                        <img src="../../static/public_file/images/page-img/11.jpg" alt="">
                        <p style="margin: 0;padding: 0;vertical-align: top;">暂无数据</p>
                    </div>
                </div>
            </div>
            <div id="pagination" class="pagination" style="margin-left: 20px;margin-top: 1.5%;"></div>
        </div>
    </div>

{% endblock %}

{% block script %}
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("personage").className = "add_class";
            document.getElementById("sponsor").className = "add-nav-active";
            my_mine(1, "0");
        };

        // 我的申请
        function my_mine(page, page_type) {
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('get', "/personal-center/filing_incoming_letters_view?page="+String(page), true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate)
                        CreateMyBacklog(JsonDate["end_list"]);
                        pagenum(JsonDate["end_list_len"], page)
                    }
                }
            };
        }

        // 待收公文
        function CreateMyBacklog(json_data) {
            if (json_data.length === 0){
                document.getElementById("img-display").style.display="inline-block";
            }
            deltr();
            var my_mine_body = document.getElementById("my_mine_body");
            for (var b=0; b<json_data.length; b++){
                var tr_mine = document.createElement("tr");var data_type = "";
                var TdMind = document.createElement("td");var TdMind1 = document.createElement("td");var TdMind2 = document.createElement("td");var TdMind3 = document.createElement("td");var TdMind4 = document.createElement("td");var TdMind5 = document.createElement("td");var TdMind6 = document.createElement("td");var TdMind7 = document.createElement("td");var TdMind8 = document.createElement("td");

                TdMind.innerHTML=json_data[b]["title"];TdMind.style.paddingLeft="1%";
                TdMind1.innerHTML=json_data[b]["send_number"];TdMind1.style.paddingLeft="1%";
                TdMind2.innerHTML=json_data[b]["recive_number"];TdMind2.style.textAlign="center";
                TdMind3.innerHTML=json_data[b]["recive_time"];TdMind3.style.textAlign="center";
                TdMind4.innerHTML=json_data[b]["user"];TdMind4.style.textAlign="center";
                TdMind5.innerHTML=json_data[b]["department"];TdMind5.style.textAlign="center";
                TdMind6.innerHTML=json_data[b]["create_time"];TdMind6.style.textAlign="center";
                TdMind8.innerHTML="<a href='examinationDetail.html?id="+json_data[b]["id"]+"'>查看</a>";TdMind8.style.textAlign="center";
                tr_mine.appendChild(TdMind);tr_mine.appendChild(TdMind1);tr_mine.appendChild(TdMind2);tr_mine.appendChild(TdMind3);tr_mine.appendChild(TdMind4);tr_mine.appendChild(TdMind5);tr_mine.appendChild(TdMind6);tr_mine.appendChild(TdMind8);my_mine_body.appendChild(tr_mine);
            }
        }

        // 删除列表
        function deltr(){
            var tb = document.getElementById('my_mine_body');
            var rowNum=tb.rows.length;
            for (i=0;i<rowNum;i++) {
                tb.deleteRow(i);
                rowNum=rowNum-1;
                i=i-1;
            }
        }

        function pagenum(dataTotals=0, page=1) {
            new myPagination({
                id: 'pagination',
                curPage: page, //初始页码
                pageAmount: 20,  //每页多少条
                dataTotal: dataTotals, //总共多少条数据
                pageTotal:  Math.ceil(parseInt(dataTotals, 10)/20), //总页数
                pageSize: 5, //可选,分页个数
                showPageTotalFlag:true, //是否显示数据统计
                showSkipInputFlag:true, //是否支持跳转
                getPage: function (page) {
                    my_mine(page, "0");
                }
            });
        }

        var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
        var table_tb_1 = document.getElementById("lecd_table");
        for (j = 0; j < table_tb_1.rows[0].cells.length; j++) {
            table_tb_1.rows[0].cells[j].onmousedown = function () {
                //记录单元格
                tTD = this;
                if (event.offsetX > tTD.offsetWidth - 10) {
                    tTD.mouseDown = true;
                    tTD.oldX = event.x;
                    tTD.oldWidth = tTD.offsetWidth;
                }
            };
            table_tb_1.rows[0].cells[j].onmouseup = function () {
                //结束宽度调整
                if (tTD === undefined) tTD = this;
                tTD.mouseDown = false;
                tTD.style.cursor = 'default';
            };
            table_tb_1.rows[0].cells[j].onmousemove = function () {
                //更改鼠标样式
                if (event.offsetX > this.offsetWidth - 10)
                    this.style.cursor = 'col-resize';
                else
                    this.style.cursor = 'default';
                //取出暂存的table_tb_1 Cell
                if (tTD == undefined) tTD = this;
                //调整宽度
                if (tTD.mouseDown != null && tTD.mouseDown == true) {
                    tTD.style.cursor = 'default';
                    if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
                        tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
                    //调整列宽
                    tTD.style.width = tTD.width;
                    tTD.style.cursor = 'col-resize';
                    //调整该列中的每个Cell
                    table_tb_1 = tTD;
                    while (table_tb_1.tagName != 'TABLE') table_tb_1 = table_tb_1.parentElement;
                    for (j = 0; j < table_tb_1.rows.length; j++) {
                        table_tb_1.rows[j].cells[tTD.cellIndex].width = tTD.width;
                    }
                }
            };
        }
    </script>
{% endblock %}
